<template>
  <div class="detail">
    <h2>电影详情</h2>
    <p>电影名称：{{name}}</p>
    <p>上映时间：{{showingon}}</p>
    <button @click="next">换一部电影</button>
  </div>
</template>

<script>
export default {
    // 通过快捷键： vdata 生成data函数，用于提供页面所需要的数据
    // 此处是data方法 而 不是data对象 原因以后讲
    data() {
        return {
            name: '功夫熊猫',
            showingon: '2021-11-12'
        }
    },
    methods: {
        next() {
            // 修改vue对象的name属性
            this.name = "这个杀手不太冷静"
        }
    },
};
</script>

<style lang="scss" scoped>
.detail {
    color: red;
}
</style>
